<template>
    <div class="time-box">
        <template v-for="(item, index) in propsItem" :key="index">
            <span @click="handlerChange(index)" :class="activeIndex == index ? 'item active' : 'item'">{{ item }}</span>
            <span v-if="index != propsItem.length - 1">/</span>
        </template>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
    propsItem: {
        type: Array,
        default: () => ['本月', '本季', '本年']
    }
})

const emit = defineEmits(['getActiveIndex'])

const activeIndex = ref(0)

const handlerChange = (index: number) => {
    activeIndex.value = index
    emit('getActiveIndex', index)
}

const width = ref(300)

watch(
    () => props.propsItem,
    () => {
        if (props.propsItem?.length == 2) {
            width.value = 150
        } else {
            width.value = 200
        }
    },
    {
        immediate: true
    }
)
</script>

<style scoped lang="scss">
.time-box {
    width: v-bind('width');
    height: 30px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #d0d9e1;
    border-radius: 4px;
    padding: 0 5px;
    font-size: 14px;
    .item {
        cursor: pointer;
        height: 20px;
        line-height: 20px;
        width: 130px;
        text-align: center;
        background-size: 100% 100%;
    }
    .active {
        color: #8dd1ed;
        background: url('@/assets/images/基础/选项标签选中背景4t.png') no-repeat;
        background-size: 100% 100%;
    }
}
</style>
